<template>
  <div class="report_table">
    <div class="report_title">金帆高清播出技术质量奖申报表</div>
    <div class="apply_video">
      <span>申报单位:</span>
      <a-input v-model="reportData.orgName" />
      <span>广播电视台</span>
    </div>
    <div class="table">
      <div class="row">
        <div class="label">申报奖种</div>
        <div class="value">
          <div class="left">播出技术质量奖</div>
        </div>
      </div>
      <div class="row">
        <div class="label">录制单位</div>
        <div class="value transcribe_unit">
          <a-input v-model="reportData.lzOrgName" />
          <span>电视台</span>
          <a-input v-model="reportData.lzDeptName" />
          <span>部</span>
        </div>
      </div>
      <div class="small_row">
        <div class="left_box">申报材料</div>
        <div class="right_box">
          <div class="row_item">
            <div class="col">
              <div class="col_label">录像机型号</div>
              <div class="col_value">
                <a-input v-model="reportData.lxjxh" />
              </div>
            </div>
            <div class="col">
              <div class="col_label">录像机格式</div>
              <div class="col_value">
                <a-input v-model="reportData.lxjgs" />
              </div>
            </div>
          </div>
          <div class="row_item">
            <div class="col">
              <div class="col_label">填表人</div>
              <div class="col_value">
                <a-input v-model="reportData.tbr" />
              </div>
            </div>
            <div class="col">
              <div class="col_label">联系电话</div>
              <div class="col_value">
                <a-input v-model.number="reportData.callTel" type="number" />
              </div>
            </div>
          </div>
          <div class="row_item">
            <div class="col">
              <div class="col_label">节目来源</div>
              <div class="col_value">
                <div class="col-flex1">
                  上星频道<a-input v-model.number="reportData.sxpdm" />
                  第(<a-input
                    style="width: 60px"
                    v-model.number="reportData.sxpdmDjpd"
                  />)频道
                </div>
              </div>
            </div>
            <div class="col">
              <div class="col_label noborder"></div>
              <div class="col_value">
                <!-- <a-input v-model="reportData.sxpdmDjpd" /> -->
                <div class="col-flex">
                  另一主要频道第（<a-input
                    v-model.number="reportData.lypddjpd"
                  />）频道
                </div>
              </div>
            </div>
          </div>
          <div class="row_item">
            <div class="col">
              <div class="col_label">盘卡编号</div>
              <div class="col_value">
                <a-input v-model="reportData.pkbh" />
              </div>
            </div>
            <div class="col"></div>
          </div>
          <div class="row_item">
            <div class="col">
              <div class="col_label">录制日期</div>
              <div class="col_value">
                <a-input
                  oninput="if(value.length>4) value=value.slice(0,4)"
                  v-model.number="reportData.lzrqn"
                  type="number"
                />
                <span>年</span>
                <a-input
                  oninput="if(value.length>2) value=value.slice(0,2)"
                  v-model.number="reportData.lzrqy"
                  type="number"
                />
                <span>月</span>
                <a-input
                  oninput="if(value.length>2) value=value.slice(0,2)"
                  v-model.number="reportData.lzrqr"
                  type="number"
                />
                <span>日</span>
              </div>
            </div>
            <div class="col">
              <div class="col_label noborder"></div>
              <div class="col_value">
                <!-- <a-input v-model="reportData.sxpdmDjpd" /> -->
                <div class="col-flex">
                  <a-input
                    oninput="if(value.length>4) value=value.slice(0,4)"
                    v-model.number="reportData.lzrq2n"
                    type="number"
                  />
                  <span>年</span>
                  <a-input
                    oninput="if(value.length>2) value=value.slice(0,2)"
                    v-model.number="reportData.lzrq2y"
                    type="number"
                  />
                  <span>月</span>
                  <a-input
                    oninput="if(value.length>2) value=value.slice(0,2)"
                    v-model.number="reportData.lzrq2r"
                    type="number"
                  />
                  <span>日</span>
                </div>
              </div>
            </div>
          </div>
          <div class="row_item">
            <div class="col">
              <div class="col_label">起止时间</div>
              <div class="col_value">
                <a-input
                  oninput="if(value.length>2) value=value.slice(0,2)"
                  v-model.number="reportData.qzsjs1"
                  type="number"
                />
                <span>时</span>
                <a-input
                  oninput="if(value.length>2) value=value.slice(0,2)"
                  v-model.number="reportData.qzsjf1"
                  type="number"
                />
                <span class="nowrap">分至</span>
                <a-input
                  oninput="if(value.length>2) value=value.slice(0,2)"
                  v-model.number="reportData.qzsjs2"
                  type="number"
                />
                <span>时</span>
                <a-input
                  oninput="if(value.length>2) value=value.slice(0,2)"
                  v-model.number="reportData.qzsjf2"
                  type="number"
                />
                <span>分</span>
              </div>
            </div>
            <div class="col">
              <div class="col_label noborder"></div>
              <div class="col_value">
                <a-input
                  oninput="if(value.length>2) value=value.slice(0,2)"
                  v-model.number="reportData.qzsj2s1"
                  type="number"
                />
                <span>时</span>
                <a-input
                  oninput="if(value.length>2) value=value.slice(0,2)"
                  v-model.number="reportData.qzsj2f1"
                  type="number"
                />
                <span class="nowrap">分至</span>
                <a-input
                  oninput="if(value.length>2) value=value.slice(0,2)"
                  v-model.number="reportData.qzsj2s2"
                  type="number"
                />
                <span>时</span>
                <a-input
                  oninput="if(value.length>2) value=value.slice(0,2)"
                  v-model.number="reportData.qzsj2f2"
                  type="number"
                />
                <span>分</span>
              </div>
            </div>
          </div>
          <div class="row_item">
            <div class="col">
              <div class="col_label display">附件</div>
              <div class="col_value">
                <div>
                  <div class="row-display">
                    1.广播电视节目预告单
                    <a-input
                      style="background: #fff"
                      disabled="disabled"
                      v-model.number="reportData.Advancenotice"
                      type="number"
                      unselectable="on"
                    />
                    张
                  </div>
                  <div class="row-display">
                    2.电视节目播出串联单
                    <a-input
                      style="background: #fff"
                      disabled="disabled"
                      v-model.number="reportData.Broadcastlist"
                      type="number"
                      unselectable="on"
                    />张
                  </div>
                </div>
              </div>
            </div>
            <div class="col">
              <div class="col_value">
                <!-- <a-input v-model="reportData.fillForAdvance noticemPerson" /> -->
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="larger_row">
        <div class="larger_label">主要完成人员</div>
        <div class="larger_value">
          <a-textarea
            v-model="reportData.zywcr"
            style="width: 100%"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </div>
      </div>
      <!-- <div class="larger_row">
        <div class="larger_label">申报单位</div>
        <div class="larger_value cloum_value">
          <div class="sign_box">
            <span>台技术主管(签字)：</span>
            <a-input
              style="background: #fff"
              disabled="disabled"
              class="input11"
              v-model="reportData.chargeSign"
            />
          </div>
          <div class="time_box">
            <span class="margin20">(盖章)</span><br />
            <a-input
              style="background: #fff"
              disabled="disabled"
              v-model.number="reportData.signYear"
              type="number"
            />
            <span>年</span>
            <a-input
              style="background: #fff"
              disabled="disabled"
              v-model.number="reportData.signMonth"
              type="number"
            />
            <span>月</span>
            <a-input
              style="background: #fff"
              disabled="disabled"
              v-model.number="reportData.signDay"
              type="number"
            />
            <span>日</span>
          </div>
        </div>
      </div>
      <div class="larger_row">
        <div class="larger_label">
          省局
          <br />
          评奖工作组
          <br />
          初审意见
        </div>
        <div class="larger_value cloum_value">
          <div class="sign_box">
            <a-textarea
              class="textarea"
                  style="background: #fff"
              disabled="disabled"
              v-model="reportData.option"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            />
          </div>
          <div class="time_box">
            <span class="margin20">(盖章)</span><br />
            <a-input
              style="background: #fff"
              disabled="disabled"
              v-model.number="reportData.optionYear"
              type="number"
            />
            <span>年</span>
            <a-input
              style="background: #fff"
              disabled="disabled"
              v-model.number="reportData.optionMonth"
              type="number"
            />
            <span>月</span>
            <a-input
              style="background: #fff"
              disabled
              v-model.number="reportData.optionDay"
              type="number"
            />
            <span>日</span>
          </div>
        </div>
      </div>
      <div class="larger_row">
        <div class="larger_label">备注</div>
        <div class="larger_value">
          <a-textarea
              disabled
            v-model="reportData.remark"
            style="width: 100%; background: #fff"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </div>
      </div> -->
    </div>
    <!-- <div class="left30">
      注：本表填写单位为省、市级广播电视台，并按《申报要求》规定数量填报奖项的主要完成人员，名单顺序按贡献大到小排列。申报人员姓名请打印填写
    </div> -->
    <a-alert message="注：本表填写单位为省、市级广播电视台，并按《申报要求》规定数量填报奖项的主要完成人员，名单顺序按贡献大到小排列。申报人员姓名请打印填写" type="warning" />
  </div>
</template>

<script>
export default {
  props: {
    proGoldSailPlay: {},
  },
  name: "ReportTable",
  data() {
    return {
      reportData: {
        sxpdm: "", // 星频道名
        orgName: "", // 申请单位
        lzOrgName: "", // 录制单位
        lzDeptName: "", // 录制部门
        lxjxh: "", // 节目标题
        lxjgs: "", // 入库盘卡编号
        callTel: "", // 录制版次
        tbr: "", //填表人
        sxpdmDjpd: "", // 首播单位
        lypddjpd: "", // 另一主要频道第
        pkbh: "", // 录像机型号
        lzrq2n: "", // 录制时间--年
        lzrq2y: "", // 录制时间--月
        lzrq2r: "", // 录制时间--日
        zywcr: "", // 主要完成人员
        option: "",
        remark: "", // 备注
        qzsj2f1: "",
        qzsj2f2: "",
        qzsj2s1: "",
        qzsj2s2: "",
        qzsjf1: "",
        qzsjf2: "",
        qzsjs1: "",
        qzsjs2: "",
      },
    };
  },
  mounted() {},
  methods: {
    empty() {
      this.reportData = {
        sxpdm: "", // 星频道名
        orgName: "", // 申请单位
        lzOrgName: "", // 录制单位
        lzDeptName: "", // 录制部门
        lxjxh: "", // 节目标题
        lxjgs: "", // 入库盘卡编号
        callTel: "", // 录制版次
        tbr: "", //填表人
        sxpdmDjpd: "", // 首播单位
        lypddjpd: "", // 另一主要频道第
        pkbh: "", // 录像机型号
        lzrq2n: "", // 录制时间--年
        lzrq2y: "", // 录制时间--月
        lzrq2r: "", // 录制时间--日
        zywcr: "", // 主要完成人员
        option: "",
        remark: "", // 备注
        qzsj2f1: "",
        qzsj2f2: "",
        qzsj2s1: "",
        qzsj2s2: "",
        qzsjf1: "",
        qzsjf2: "",
        qzsjs1: "",
        qzsjs2: "",
      };
    },
  },
};
</script>

<style scoped>
.report_table {
  color: #444;
}
.margin20 {
  margin-left: 120px;
}
.margin15 {
  margin-left: 90px;
}
.noborder {
  border-left: 0 !important;
  border-left: 0 !important;
}
.left30 {
  margin-left: 30px;
}
.col-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: 285px;
}
.row-display {
  display: flex;
  white-space: nowrap;
  align-items: center;
}
.display {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nowrap {
  white-space: nowrap;
}
.report_title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-top: 8px;
}
.apply_video {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.apply_video >>> .ant-input {
  width: 240px;
  margin: 0 12px;
  border: 0;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
}
.apply_video >>> .ant-input:focus {
  box-shadow: none;
}
.table {
  margin-top: 10px;
  border: 1px solid #B8BABD;
  border-radius: 10px;
  margin: 30px;
}
.row,
.larger_row {
  border-bottom: 1px solid #B8BABD;
  display: flex;
  align-items: center;
}
.row .label {
  padding: 12px 0;
  border-right: 1px solid #B8BABD;
  width: 200px;
  text-align: center;
}
.row .value {
  flex: 1;
  display: flex;
  justify-content: center;
}
.larger_label {
  padding: 50px 0;
  border-right: 1px solid #B8BABD;
  width: 200px;
  text-align: center;
}
.larger_value {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cloum_value {
  display: flex;
  flex-direction: row;
}
.sign_box {
  /* display: flex;
  align-items: center; */
}
.time_box {
  /* margin-top: 20px;
  margin-left: 470px; */
}
.larger_value >>> .ant-input {
  width: 500px;
}
.time_box >>> .ant-input {
  width: 60px;
}
.row:last-child,
.larger_row:last-child {
  border: 0;
}
.textarea {
  /* width: 100%;
  height: 100%; */
  /* max-width: 300px; */
  height: 200px !important;
}
.row .transcribe_unit {
  display: flex;
  align-items: center;
}
.transcribe_unit >>> .ant-input {
  width: 240px;
  border: 0;
  border-radius: 0;
}
.input11 {
  width: 380px !important;
}
.transcribe_unit >>> .ant-input:focus {
  box-shadow: none;
}
.larger_value >>> .ant-input {
  border: 0;
  border-radius: 0;
}
.larger_value >>> .ant-input:focus {
  box-shadow: none;
}
.left_box {
  writing-mode: tb-rl;
  letter-spacing: 20px;
  height: 341px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  border-bottom: 1px solid #B8BABD;
}
.col-flex1 {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: 300px;
}
.right_box {
  flex: 1;
}
.small_label {
  padding: 12px 0;
  border-right: 1px solid #B8BABD;
  width: 160px;
  text-align: center;
}
.small_row {
  display: flex;
}
.row_item {
  display: flex;
  border-bottom: 1px solid #B8BABD;
}
.row_item .col {
  flex: 1;
  display: flex;
}
.col_label {
  padding: 12px 0;
  border-right: 1px solid #B8BABD;
  border-left: 1px solid #B8BABD;
  width: 160px;
  text-align: center;
  box-sizing: border-box;
}
.col_value {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.col_value span {
  /* width: 80px;
  padding-right: 20px; */
}
.col_value >>> .ant-input {
  border: 0;
  border-radius: 0;
}
.col_value >>> .ant-input:focus {
  box-shadow: none;
}
.row >>> .ant-radio-wrapper:nth-child(2) {
  margin: 0 40px;
}
</style>
